<!--
/**
 * @author xuyh0817
 * @email xuyh0817@foxmail.com
 * @date 2022-10-19 12:02
 * @version 1.0.0
 * @doc todo
 * @website todo
 * @remark  如果要分发源码，需在本文件顶部保留此文件头信息！！
 * @description todo
 */
 -->
<template>
  <div class="x-render">
    <!--    头部-->
    <Top></Top>
    <!-- 1.设计阶段 -->
    <MultiPane class="x-render-memo">
      <!-- 中间 -->
      <MainPane :data="data">
        <MoOps :data.sync="data" :active.sync="active"/>
      </MainPane>
      <MultiPaneResizer/>
      <!-- 右侧 -->
      <RightPane :data.sync="data" :active.sync="active"/>
    </MultiPane>
    <!--    底部-->
    <Bottom></Bottom>
  </div>
</template>

<script>
import MultiPane from './MultiPane'
import MultiPaneResizer from './MultiPaneResizer'
import RightPane from './RightPane'
import MainPane from './MainPane'
import Top from './Top'
import Bottom from './Bottom'
import MoOps from './Ops'

export default {
  name: "Home",
  components: {
    MultiPane,
    MultiPaneResizer,
    RightPane,
    MainPane,
    Top,
    Bottom,
    MoOps
  },
  data() {
    return {
      active: -1,
      data: {
        title: {fontSize: 26, lineHeight: 42},
        content: []
      }
    }
  }
}
</script>

<style scoped lang="css">
.x-render {
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-flow: column nowrap;
  position: relative;
}

/* x-render-memo 整体样式 */
.x-render-memo {
  width: 100%;
  height: calc(100% - 60px);
  display: flex;
  flex-flow: row nowrap;
  padding: 5px 15px;
  border: 1px solid #ebeef5;
  overflow: hidden;
}

/* 左右面板拖动的抓手 */
.x-render-memo > .multipane-resizer {
  margin: 0;
  left: 0;
  position: relative;
  box-sizing: border-box;
  border-left: 1px solid #ebeef5;
  border-right: 1px solid #ebeef5;
  width: 7px;
}

.x-render-memo > .multipane-resizer::before {
  display: block;
  content: "";
  width: 1px;
  height: 40px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -20px;
  margin-left: -1.5px;
  box-sizing: border-box;
  border-left: 1px solid #dcdfe6;
  border-right: 1px solid #dcdfe6;
}

.x-render-memo > .multipane-resizer::before::before {
  border-color: #999;
}
</style>
